import React from "react";
import {connect} from "react-redux";
import {closeRecordVideo, openRecordVideo, queryRecordAction} from "../actions/RecordAction";
import {Button, Table, Tooltip} from "antd";
import {YoutubeOutlined} from "@ant-design/icons";
import {Record} from "../components/Record";


class RecordPage extends React.Component {

  constructor(props) {
    super(props);
    this.columns = [
      {
        title: '应用',
        dataIndex: 'app',
        key: 'app',
      },
      {
        title: '推流码',
        dataIndex: 'stream',
        key: 'stream',
      },
      {
        title: '开始时间',
        dataIndex: 'push_sdate',
        key: 'push_sdate',
      },
      {
        title: '结束时间',
        dataIndex: 'push_udate',
        key: 'push_udate',
      },
      {
        title: '查看',
        key: 'watch',
        render: (record) => {
          return <div>
            <Tooltip title="查看">
              <Button type="primary" shape="circle" icon={<YoutubeOutlined/>}
                      onClick={() => {
                        this.props.openRecordVideo(record)
                      }}/>
            </Tooltip>
          </div>
        }
      },
    ]  }

  UNSAFE_componentWillMount() {
    this.props.query()
  }

  render() {
    return <div>
      <Table columns={this.columns} dataSource={this.props.recordInfoList}/>
      <Record {...this.props}/>
    </div>
  }
}

export default connect(
  (state) => {
    return {
      recordInfoList: state.recordReducer.recordInfoList,
      recordVideoVisible: state.recordReducer.recordVideoVisible,
      videoRecord: state.recordReducer.videoRecord
    }
  },
  (dispatch) => {
    return {
      query: () => dispatch(queryRecordAction()),
      openRecordVideo:(record)=>dispatch(openRecordVideo(record)),
      closeRecordVideo: () => dispatch(closeRecordVideo())
    }
  }
)(RecordPage)